<template>
  <el-dialog
    :visible.sync="visible"
    custom-class="fullImgLayer"
    :show-close="false"
    size="full">
    <div class="full-img" @click.self="visible = false">
      <div class="full-img-box">
        <i class="el-icon el-icon-close" @click="visible = false"></i>
        <img :src="url">
      </div>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        visible: true,
        url: ''
      }
    },
    methods: {
      show (url) {
        this.url = url
        this.$nextTick(() => {
          this.visible = true
        })
      }
    }
  }
</script>
<style lang="scss">

  .fullImgLayer {
    background-color: rgba(#000, .7);
    .el-dialog__header {
      position: absolute;
      right: 0;
    }
    .el-dialog__body {
      width: 100%;
      height: 100%;
      display: table;
    }
  }

  .full-img-box {
    display: inline-block;
    position: relative;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    i {
      position: absolute;
      right: -8px;
      top: -8px;
      font-size: 12px;
      width: 28px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      background-color: #d71e06;
      border-radius: 50%;
      color: #ffffff;
      cursor: pointer;
    }
  }

  .full-img {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
</style>
